import React, { useCallback, useState } from 'react';
import NavBar from '@/components/NavBar/NavBar';
import { useNavigate } from 'react-router-dom';
import { Tabs } from 'antd-mobile';
import OrderList from '@/views/ConsultType/ConsultOrder/components/OrderList/OrderList';
import './ConsultOrder.scss';

const ConsultOrder = () => {
  const navigate = useNavigate();
  // 激活项
  const [type, setType] = useState<'1' | '2' | '3'>('2');
  // 左边插槽内容
  const left = useCallback(() => (<span>返回</span>), []);
  // 中间插槽内容
  const children = useCallback(() => (<span>问诊记录</span>), []);

  /**
   *@description 设置激活项的回调函数
   * */
  const changeActive = (key: string) => {
    setType(key as '1' | '2' | '3');
  };


  return (
    <div className="consult-order">
      {/*导航栏组件*/}
      <NavBar onBack={() => navigate(-1)} back={left()} children={children()}></NavBar>
      {/*tabs栏*/}
      <Tabs activeKey={type} onChange={changeActive}>
        <Tabs.Tab title="极速问诊" key="2">
          <OrderList type={type}></OrderList>
        </Tabs.Tab>
        <Tabs.Tab title="找医生" key="1">
          <OrderList type={type}></OrderList>
        </Tabs.Tab>
        <Tabs.Tab title="开药问诊" key="3">
          <OrderList type={type}></OrderList>
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};

export default ConsultOrder;